<template>
  <div v-if="data.card_image" class="card_box">
    <img :src="data.card_image">
  </div>

  <div v-else class="card_box_g">
    <div class="shareImgs_box">
      <img src="@/assets/img/yx_logo.png">
      <img class="img_ewm" :src=ewmImg>
      <div>
        <div class="text_t">关注深房协公众号</div>
        <div class="text_b">查看营销人员登记号</div>
      </div>
    </div>
  </div>

  <!-- <div v-if="data.card_image" class="see_card" @click="go"><a>查看登记卡使用说明</a></div> -->
  <!-- <div v-if="data.card_image" class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div @click="share" class="agree font400 content3 color4">
        返回首页
      </div>
    </div>
  </div> -->
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { Dialog } from 'vant'
// import wx from 'weixin-js-sdk'
import { getMyCardInfo, getConstantlyInfo, getWechatQrcode } from '@/api'
import { useRoute } from 'vue-router'
import { getToken } from '@/service/cookie'
// import { Toast } from 'vant'
// const router = useRouter()
const route = useRoute()
const data: any = ref({})
const visible: any = ref(0)
const ewmImg: any = ref('')
const code: any = getToken('bindId')

route.query.id && getMyCardInfo({ id: route.query.id }).then(res => {
  console.log(route.query.id)
  data.value = res
  data.value.market_card_effective_time = data.value.market_card_effective_time.split('-')
  data.value.market_card_effective_time.splice(1, 0, '年')
  data.value.market_card_effective_time.splice(3, 0, '月')
  data.value.market_card_effective_time.splice(5, 0, '日')
  data.value.market_card_effective_time = data.value.market_card_effective_time.join('')
  console.log(res, data.value.market_card_effective_time)
})

// function getQueryString (name: any) {
//   const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
//   const r = window.location.search.substr(1).match(reg)
//   if (r != null) {
//     return encodeURIComponent(r[2])
//   } else {
//     return null
//   }
// }
console.log(getToken('bindId'), 'co11de')
getConstantlyInfo({ code: code }).then((res: any) => {
  visible.value = res.subscribe ? res.subscribe : '0'
})

getWechatQrcode().then((res: any) => {
  ewmImg.value = res
})
</script>

<style lang="less" scoped>
.card_box {
  position: relative;
  text-align: center;
  width: 90%;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 28px 5px rgba(255, 213, 173, 1);
  background: url(@/assets/img/yx_bg.png) no-repeat;
  background-size: 215px 265px;
  background-position: 115% 115%;

  img {
    width: 100%;
  }
}

.card_box_g {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: -webkit-linear-gradient(#FF9F5D, #FF7A1F);
  /* Safari 5.1 - 6.0 */

  background: -o-linear-gradient(#FF9F5D, #FF7A1F);
  /* Opera 11.1 - 12.0 */

  background: -moz-linear-gradient(#FF9F5D, #FF7A1F);
  /* Firefox 3.6 - 15 */

  background: linear-gradient(#FF9F5D, #FF7A1F);

  /* 标准的语法（必须放在最后） */
  .shareImgs_box {
    text-align: center;
    position: absolute;
    top: 8%;
    width: 80%;
    padding: 30px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 18px;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    left: 50%;
    transform: translateX(-50%);

    img {
      width: 100%;
    }

    .img_ewm {
      margin: 20px 0 15px 0;
    }

    .text_t {
      color: #454757;
      margin-bottom: 8px;
      font-size: 16px;
    }

    .text_b {
      color: #FF7A1F;
      font-size: 16px;
    }
  }

}

.see_card {
  text-align: center;
  font-size: 12px;
  color: #454757;

  a {
    text-decoration: underline;
  }
}

.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;

    .agree {
      width: 100%;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
  }
}

@media (min-width: 750px) {
  .card_box {
    width: 90%;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 28px 5px rgba(255, 213, 173, 1);
    background-size: 215px 265px;
    background-position: 115% 115%;
  }

  .see_card {
    font-size: 12px;
  }

  .fexd_footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 375px;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

    .footer_btn {
      padding: 0 30px;
      height: 100%;
      text-align: center;

      .agree {
        width: 189px;
        height: 44px;
        background: #ff7a1f;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
      }
    }
  }
}
</style>
